$(function(){
  // 打开页面本地储存中如果有搜索记录，就渲染到页面上
  // $('.history-list ul').html(`<li>${JSON.parse(localStorage.getItem('history'))}</li>`)
  const historyArr = JSON.parse(localStorage.getItem('history'))
  let str = ''
  historyArr.forEach(item => {
    str += `<li>${item}</li>`
  })
  $('.history-list ul').html(str)

  const layer = layui.layer
  // 1.给确定按钮添加事件
  // 定义一个空数组用来存储搜索内容
  let arr = []
  $('.text').on('click',function(){
    var $value = $('[type="text"]').val()
    // 将搜索内容存到数组里
    arr.push($value)

    // 搜索历史记录
    $('.history-list ul').append(`<li>${$value}</li>`)
    // 将搜索记录存储在本地
    localStorage.setItem('history',JSON.stringify(arr))
    var pageNum = 1

    $.ajax({
      method:'GET',
      url:'http://124.223.14.236:3001/api/goods',
      data:{
        pageNum,
        title:$value
      },
      success:function(res){
        console.log(res)
        if(!res.success) return layer.msg('没有搜索内容')
        // 后台返回的有数据那么就隐藏历史记录，否则就显示
        if(res.data.list.length !== 0) {
         $('.history-list').hide() 
        }else {
          $('.history-list').show() 
        }

        var str = '' 
        res.data.list.forEach(item => {
          const {img, price, title} = item
          str += `
            <li>
              <img src="${img}" alt="">
              <h3>${title}</h3>
              <p>
                  <span>￥${price}</span>
                  <span>+</span>
              </p>
            </li>
          `
        });
        $('.good-list ul').html(str)
      }
    })
  })

  // 2.返回上一页
  $('.back').on('click',function(){
    window.history.back()
  })
})